<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<script type="text/javascript" src="${rootPath }/common/resource/jquery-3.3.1.js"></script>
		<script type="text/javascript">
			/* 定义方法
				~先引入Jquery;因为js的ajax有好多缺点:
					~代码烦锁
					~代码兼容浏览器的差异不好
				~拼装信的内容
			*/
			function testAjax()
			{
				console.info("===testAjax==");
				/* 通过id选择器,取到文本框里面的内容 */
				var a = $("#a").val();
				var b = $("#b").val();
				var c = $("#c").val();
				console.info("==a="+ a +",b="+ b +",c=" + c);
				/* post请求
					站在开发人员的角度;迫切的需要一个方法:
					应该有至少两个参数:(url,参数--信的内容);返回值:回信的内容;
					参数1:url,
					参数2:信的内容
					参数3:返回值
					参数4:返回值期望处理的类型
				*/
				//$.post;post请求
				//$.get;get请求
				//$.ajax:此方法是请求最全的;post,get是ajax的简化版本;封装的是XMLHttpRequest
				/*JSONP:是一个特殊的JSON协议;ajax不能跨域访问;必须服务器端返回的数据是JSONP
				JSONP:fastJSON,里面就支持JSONP;把所有的JSONObject,JSONArray,加一个P
				*/
				$.get(
					"${rootPath }/back/DemoBackServlet?method=demoAjax",
					/* "http://www.baidu.com", */
					/* a=1&b=2&c=3 */
					/* "a="+ a +"&b="+b +"&c=" + c, */
					/* 信的内容是JSON */
					{"a":a,"b":b,"c":c},
					function(data,b,c)
					{
						/* data:服务器端返回的结果;(只使用第一个)
							b:请求是否成功
							c:object*/
						/* 当请求发起时,收到了服务器的响应(回信),会执行此方法 */
						console.info("===返回:=a=" + data + "--b-" + b + "==c=" + c)
						/* 提供给了div
							服务器返回的是JSON,只想取到某一个值;
							JSON创建js对象的第二种方式;对象.属性
							因为返回的是字符串,不是JSON对象;
							var a = {'info':'0','code':'0'};
							var a = "{'info':'0','code':'0'}";
							~eval
							~jquery提供
						*/
						//eval("var dataEval = " + data);
						//$("#info").html(data + "---具体值:" + dataEval.info);
						$("#info").html(data + "---具体值:" + data.info);
					},
					"json"
				);
			}
		</script>
	</head>
	<body>
		测试的Ajax
		<form action="${rootPath }/back/DemoBackServlet?method=demoAjax" method="post">
			<table border="1" width="80%">
				<tr>
					<td>a</td>
					<td><input type="text" id="a" name="a" value="1"></td>
				</tr>
				<tr>
					<td>b</td>
					<td><input type="text" id="b" name="b" value="2"></td>
				</tr>
				<tr>
					<td>c</td>
					<td><input type="text" id="c" name="c" value="3"></td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="提交">
						<input type="button" value="ajax" onclick="testAjax()">
					</td>
				</tr>
			</table>
		</form>
		<div id="info">
		</div>
	</body>
</html>